<!-- 我的积分 -->
<template>
	<view class="my-integral-padding " style="width: 100%;height: auto;">

		<view v-show="img_flag"
			style="width: 100%;text-align: center;width: 100%;position: fixed; top: 0%;left: 0%;z-index: 999;">
			<image :src="imgr" @click="downLoadFile(imgr)" style="width: 100%;height: 100vh;  z-index: 1000;"></image>
		</view>


		<view class="page_one">
			<!-- 积分统计 -->
			<view class="integral">
				<div class="flex">
					<view class="block_3">
						<u-avatar :size="110" :src="info.avatar"></u-avatar>
					</view>
					<view style="margin-top:2%;margin-left:30rpx;width: 100%;">
						<view style="font-size:32rpx;color:#3D3D3D;font-weight: bold;" v-if="lang=='zh'">
							{{info.username}}
						</view>
						<view style="font-size:24rpx;color:#3D3D3D;" v-if="lang=='ru'">{{info.username_ru}}</view>
						<div class="flex items-center" style="margin-top:8rpx;">
							<image :src='serverImageUrl("/static/newStyleIcon/phone.png")' mode="widthFix" style="width: 30rpx;"></image>
							<view style="font-size:12px;color:#000;">{{info.mobile}}</view>
						</div>
						<view style="font-size:12px;margin-top:8rpx;margin-left:1%;">
							<view style="float:left;color:#949494;">
								{{$t("邀请码")}} ：
							</view>
							<view style="float:left;color:#ed7457;">
								{{info.agent_code}}
							</view>
						</view>
						<view style="clear: both;"></view>
					</view>
				</div>

				<view style="width: 100%;display: flex;">
					<view class="btn-item" @click="copyText">
						{{$t("点击推广链接")}}
					</view>
					<view class="btn-item" @click="copyText2">
						{{$t("生成推广海报")}}
					</view>
				</view>


			</view>




			<view style="margin-top:5%;display: flex;background-color: transparent;">

				<view class="middle-leiji" style="margin-right: 5%;">
					<view class="text-1" style="color:#949494;height: 60rpx; line-height: 60rpx;">{{ $t('累计积分收益') }}
					</view>
					<view class="text-2"
						style="color:#fc6e4a; margin-top: 16rpx ; font-size: 40rpx; font-weight:bolder;">{{ points }}
					</view>
				</view>

				<view class="middle-leiji" style="">
					<view class="text-1" style="color:#949494;height: 60rpx; line-height: 60rpx;" v-if="lang!='ru'">
						{{ $t('邀请用户数') }}
					</view>
					<view class="text-1" style="color:#949494;height: 60rpx; line-height: 30rpx;" v-if="lang=='ru'">
						{{ $t('邀请用户数') }}
					</view>
					<view class="text-2"
						style="color:#fc6e4a; margin-top: 16rpx ; font-size: 40rpx; font-weight:bolder;">
						{{ info.count }}
					</view>
				</view>

			</view>





			<!-- 积分使用明细 -->
			<p class="detail" style="font-size:30rpx;display: none;">{{ $t('数据统计') }}</p>
			<view style="height: 30px;"></view>
			<!-- 使用列表 -->
			<view class="use">

				<view v-if="list.length < 1" style="padding-top: 15%;">
					<u-empty :text="$t('没有数据')" mode="data"></u-empty>
				</view>

				<view v-else>

					<view style="width: 100%;display: flex;text-align: center;font-size: 14px;">
						<view style="width: 25%;"></view>
						<view style="width: 15%;" v-if="lang=='zh'">注册</view>
						<view style="width: 15%;" v-if="lang=='ru'">Pегистр.</view>
						<view style="width: 15%;" v-if="lang=='zh'">发布1</view>
						<view style="width: 15%;" v-if="lang=='ru'">Публ. 1</view>
						<view style="width: 10%;">2</view>
						<view style="width: 10%;">3</view>
						<view style="width: 10%;">4</view>
						<view style="width: 10%;">5</view>
					</view>

					<view class="use-list">
						<!-- <ol >
						<li v-for="(item,index) in list" :key="index" :class="index===list.length-1?'':'line'">
						  <view>
							<view class="_flex">
							  <text class="use_span">{{ $t(item.memo) }}</text>
							  <text class="time">
								<text
									style="margin-right: 10rpx;">{{ time("S", item.createtime) }}
								</text>
							  </text>
							</view>
							<text class="money">+{{ item.score }}</text>
						  </view>
						</li>
					  </ol> -->
						<view v-for="(item,index) in list" :key="index"
							style="width: 100%;display: flex;color:#fc6e4a; border-radius:10rpx;text-align: center; margin-top: 20rpx; font-size: 12px; height: 180rpx;background-color: #fff;">
							<view style="width: 25%; text-align: left;">
								<view
									style="white-space: nowrap;color:#000; padding-left: 15px; padding-top: 20rpx; padding-bottom: 10rpx; text-align: left;font-weight: bold;"
									v-if="lang=='zh'">{{$t(item.username)}}</view>
								<view
									style="white-space: nowrap;color:#000; padding-left: 15px; padding-top: 20rpx; padding-bottom: 10rpx; text-align: left;font-weight: bold;"
									v-if="lang=='ru'">{{$t(item.username_ru)}}</view>

								<image :src="toImages(item.avatar)"
									style="width: 100rpx;height: 100rpx;padding-left: 15px;"></image>
							</view>
							<view style="width: 15%; font-weight: bold; font-size: 36rpx;line-height: 180rpx;">
								{{item.invite_score||'-'}}
							</view>
							<view style="width: 15%; font-weight: bold; font-size: 36rpx;line-height: 180rpx;">
								{{item.release_score||'-'}}
							</view>
							<view style="width: 10%; font-weight: bold; font-size: 36rpx;line-height: 180rpx;">
								{{item.release_score2||'-'}}
							</view>
							<view style="width: 10%; font-weight: bold; font-size: 36rpx;line-height: 180rpx;">
								{{item.release_score3||'-'}}
							</view>
							<view style="width: 10%; font-weight: bold; font-size: 36rpx;line-height: 180rpx;">
								{{item.release_score4||'-'}}
							</view>
							<view style="width: 10%; font-weight: bold; font-size: 36rpx;line-height: 180rpx;">
								{{item.release_score5||'-'}}
							</view>
						</view>

						<!-- <view style="width: 100%;display: flex;color:#fc6e4a; border-radius:10rpx;text-align: center; margin-top: 20rpx; font-size: 12px; height: 180rpx;background-color: #fff;">
					<view style="width: 25%; text-align: left;">
							<view style="white-space: nowrap;color:#000; padding-left: 15px; padding-top: 20rpx; padding-bottom: 10rpx; text-align: left;font-weight: bold;">安娜安娜安娜安娜安娜安娜</view>
							<image :src='serverImageUrl("/static/file.png")' style="width: 100rpx;height: 100rpx;padding-left: 15px;"></image>
						</view>
					<view style="width: 20%;line-height: 180rpx;">1</view>
					<view style="width: 15%;line-height: 180rpx;">1</view>
					<view style="width: 10%;line-height: 180rpx;">2</view>
					<view style="width: 10%;line-height: 180rpx;">3</view>
					<view style="width: 10%;line-height: 180rpx;">4</view>
					<view style="width: 10%;line-height: 180rpx;">5</view>
				  </view> -->

					</view>

				</view>

			</view>

		</view>
		<view style="height: 20rpx; width: 100%;"></view>


		<!-- 按钮 -->
		<view class="layout ">
		  <view style="height: 2rpx; width: 100%;"></view>
		  <u-button :custom-style="customStyle" hover-class="none" type="primary" @click="tobuy">{{ $t('充值积分') }}</u-button>
		</view>
	</view>
</template>
<script>
	import Integral from '@/pages/user/element/element.vue'
	import {
		time
	} from "@/common/public";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	import {
		isBase64
	} from "@/common/public";

	export default {
		data() {
			return {
				customStyle: {
					width: '656rpx',
					height: '63rpx',
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '26rpx',
				},
				list: [],
				imgr: '',
				img_flag: false,
				points: 0,
				this_month: 0,
				info: {},
				lang: this.$i18n.locale,
				page: 1
			}
		},
		components: {
			Integral
		},
		computed: {
			toImages() {
				return (src) => {
					return isBase64(src) ? src : IMAGE_URL + src
				}
			},
		},
		onLoad() {
			this.getInvitationInfo()
			this.getInvitationScoreTotal()
			this.getInvitationScoreList()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("我的邀请")
			})
		},
		methods: {
			time,
			integral() {
				this.$u.route('/pages/user/my-integral/BuyPoints')
			},
			tobuy() {
				this.$u.route('/pages/user/my-integral/BuyPoints')
			},
			copyText() {
				var that = this
				uni.setClipboardData({
					data: 'https://app.gluz.com.cn/h5/#/pages/user/register/register?user_id=' + this.info.id +
						'&country=' + this.info.country,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: that.$t('操作成功'),
							icon: 'success',
							duration: 2000
						});
					}
				});
			},

			downLoadFile(url) {
				const that = this
				uni.showLoading({
					title: "download...",
					mask: true
				})
				console.log('下载链接', url)
				var downloadTask = uni.downloadFile({
					url: url,
					success(res) {
						uni.hideLoading()
						console.log('tempFilePath', res.tempFilePath)
						const tempFilePath = res.tempFilePath
						uni.openDocument({
							filePath: tempFilePath,
							showMenu: true,
							success: function(file) {
								console.log('file-success', file);
							}
						});
						that.img_flag = false
					},
					fail() {
						that.img_flag = false
					}
				})
				downloadTask.onProgressUpdate(({
					progress,
					totalBytesWritten,
					totalBytesExpectedToWrite
				}) => {
					if (progress === 100) {
						downloadTask.offProgressUpdate();
					}
				})
			},

			copyText2() {
				var that = this
				this.$u.api.user.getInvitationImg().then(res => {
					console.log(res)
					that.imgr = res
					that.img_flag = true
				})
			},

			//获取用户邀请信息
			getInvitationInfo() {
				var that = this
				this.$u.api.user.getInvitationInfo().then(res => {
					this.info = res;
					this.info.avatar = IMAGE_URL + this.info.avatar;
					this.$u.api.user.getInvitationImg().then(re => {
						that.imgr = re
					})
				})
			},
			//获取邀请积分统计
			getInvitationScoreTotal() {
				this.$u.api.user.getInvitationScoreTotal().then(res => {
					this.points = res.total
				})
			},
			//积分统计
			getInvitationScoreList() {
				this.$u.api.user.getInvitationScoreList({
					page: this.page
				}).then(res => {
					console.log(res)
					this.list = res
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100vh;
		background-color: #f0f0f0;
	}

	.page_one {
		.detail {
			padding-left: 12rpx;
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(0, 0, 0, 0.88);
			line-height: 38rpx;
			margin: 27rpx 0 27rpx 0;
		}

		.use {
			background: transparent;
			border-radius: 14rpx;
			min-height: 400rpx;

			.use-list {
				ol {
					list-style-type: none;
					padding: 0 20rpx 0 27rpx;
					//看需求，超出出滚动条
					height: 45vh;
					overflow: auto;

					li {
						view {
							padding-right: 23rpx;
							height: 109rpx;
							box-sizing: border-box;

							._flex {
								width: 50%;
								display: flex;
								float: left;
								flex-direction: column;
								justify-content: center;

								.use_span {
									font-size: 24rpx;
									word-break: break-all;
									font-weight: 400;
									color: rgba(0, 0, 0, 0.88);
									line-height: 35rpx;
								}


								.time {
									font-size: 24rpx;

									font-weight: 400;
									color: rgba(85, 85, 85, 0.88);
									line-height: 35rpx;
									margin-top: 5rpx;
								}
							}

							.money {
								font-size: 38rpx;

								font-weight: 600;
								color: #FF5229;
								line-height: 109rpx;
								float: right;
							}
						}
					}
				}
			}
		}
	}

	.line {
		border-bottom: 2rpx solid #EBEBEB;
	}

	.integral {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		// background-image: url($my-bg-url +  '20231101/4088564162f99b8302e6ceabf230ee50.png');
		// border: 1px dashed #cccccc;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding-left: 31rpx;
		background-image: url("https://app.gluz.com.cn/uniappAssets/static/newStyleIcon/invitationbg.png");
		background-color: #fff;
		background-size: 100% 100%;
	}

	.gain {
		width: 180rpx;
		min-height: 45rpx;
		word-break: break-all;
		background: rgba(255, 255, 255, .46);
		border-radius: 14rpx 0rpx 0rpx 14rpx;
		float: right;
		margin-top: 24rpx;
		text-align: center;

		text {
			font-size: 24rpx;

			font-weight: 400;
			color: rgba(255, 255, 255, 0.88);
			line-height: 45rpx;
		}
	}

	.credits {
		margin-top: 85rpx;
		float: left;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.88);
		// height: 221rpx;

		.text-1 {
			font-size: 28rpx;

			line-height: 35rpx;
		}

		.text-2 {
			font-size: 63rpx;
			line-height: 77rpx;
			letter-spacing: 1px;
			text-align: center;
		}

		.text-3 {
			font-size: 24rpx;

			line-height: 35rpx;
		}

		.text-4 {
			font-size: 35rpx;

			line-height: 49rpx;
		}
	}

	.block_3 {
		// background-color: gainsboro;
		border-radius: 50%;

		.head {
			width: 159rpx;
			height: 159rpx;
			border-radius: 50%;
		}

		// position: absolute;
		// left: 45rpx;
		// top: 5%;
		width: 140rpx;
		height: 140rpx;
		margin-top:2%;
	}

	.middle-leiji {
		padding-top: 2%;
		width: 48%;
		text-align: center;
		font-size: 30rpx;
		color: #949494;
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 4%;
	}

	.flex {
		display: flex;
	}

	.items-center {
		align-items: center;
	}

	.btn-item {
		margin-top: 40rpx;
		width: 44%;
		height: 79rpx;
		margin-left: 4%;
		border-radius: 16rpx;
		background: linear-gradient(110deg, #F79B29 0%, #DD2910 100%);
		padding: 2% 8%;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>